<template>
  <el-card class="box-card">
    <template #header>
      <el-descriptions class="margin-top" :column="3" :size="size" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <user />
              </el-icon>
              {{ $t("system.account.username") }}
            </div>
          </template>
          {{ row.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <iphone />
              </el-icon>
              {{ $t("system.account.contact_tel") }}
            </div>
          </template>
          {{ row.contact_tel }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <UserFilled />
              </el-icon>
              {{ $t("system.account.contact_name") }}
            </div>
          </template>
          {{ row.contact_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              {{ $t("system.account.remarks") }}
            </div>
          </template>
          <el-tag size="small">
            {{ row.remarks }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <location />
              </el-icon>
              {{ $t("system.account.last_ip") }}
            </div>
          </template>
          {{ row.last_ip }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <AlarmClock />
              </el-icon>
              {{ $t("system.account.last_time") }}
            </div>
          </template>
          {{ row.last_time }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <el-row :gutter="12">
      <el-col :span="20">
        <h2 style="text-align: center">入职企业员工信息列表</h2>
      </el-col>
      <el-col :span="8" v-for="staff in row.staff" :key="staff">
        <el-card shadow="hover">
          <el-row :gutter="12">
            <el-col :span="6">
              <el-image style="width: 100px" :src="staff.branch_logo" :fit="fit" />
            </el-col>
            <el-col :span="18">
              <el-row>
                <el-col :span="6">{{ $t("system.branch.name") }} : </el-col>
                <el-col :span="18"> {{ staff.branch_name }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="6">{{ $t("system.staff.job_no") }} : </el-col>
                <el-col :span="18"> {{ staff.job_no }}</el-col>
              </el-row>

              <el-row>
                <el-col :span="6">{{ $t("system.staff.induction") }} : </el-col>
                <el-col :span="18"> {{ staff.induction }}</el-col>
              </el-row>

              <el-row>
                <el-col :span="6">{{ $t("system.staff.quit") }} : </el-col>
                <el-col :span="18"> {{ staff.quit }}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup name="accountDetail">
import { reactive, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import { accountDetail } from "@/api/modules/system";

const route = useRoute();
const row = reactive({});
onBeforeMount(async () => {
  await accountDetail(route.params).then(response => {
    Object.assign(row, response.data);
  });
});
</script>
